<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>百万圆广告首页</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Homepage.css">
    <link rel="stylesheet" type="text/css" href="css/bubble/BubbleBgStyle.css"/>

    <style>
        html,
        body {
            border: none;
            overflow: hidden;
            height: 100%;
        }

        body {
            background: url(img/bg.jpg);
            background-size: 100% 100%;
        }

        div {
            background-size: 100% 100%;
        }

        @keyframes flicker {
            0% {
                opacity: 1;
            }
            25% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
   
    <script src="js/vue.js"></script>
	<script src="js/axios-0.18.0.js"></script>
	
	<script src="js/ManagerHomePage/Bubbles.js"></script>
	<script src="js/ManagerHomePage/VueForBubbles.js"></script>
    <script>
        /**
         * 全屏切换
         * @param {Object} elem
         */
        function toggleFS(elem) {
            var tag = Boolean(elem.getAttribute('tag') == 'true');
            (!tag ? rfs : efs)();
            elem.setAttribute('tag', tag ? false : true);
        }

        //进入全屏
        function rfs() {
            var de = document.documentElement;
            if (de.requestFullscreen)
                de.requestFullscreen();
            if (de.mozRequestFullScreen)
                de.mozRequestFullScreen();
            if (de.webkitRequestFullScreen)
                de.webkitRequestFullScreen();
        };

        //退出全屏
        function efs() {
            var d = document;
            if (d.exitFullscreen)
                d.exitFullscreen();
            if (d.mozCancelFullScreen)
                d.mozCancelFullScreen();
            if (d.webkitCancelFullScreen)
                d.webkitCancelFullScreen();
        };
    </script>

</head>

<body ondblclick="toggleFS(this)">
	
    <div class="navbar" >
        <input type="checkbox" id="checkbox">
        <label for="checkbox" class="titleLabel">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </label>
        <ul>
            <div id="icon">
	    		<li>
		            <img :src="user.icon" alt="">
		            <span>欢迎您！{{user.nickname}}</span>
		        </li>
	    	</div>
            <li>
                <a href="javascript:void(0)">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
	            <a href="User-HotAd-Page.html">
	                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
	                <span>本月热门</span>
	            </a>
	        </li>
            <li>
                <a href="User-Info-Page.html">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    <span>个人中心</span>
                </a>
            </li>
            <li>
                <a href="User-Buy-Page.html">
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    <span>购买广告</span>
                </a>
            </li>
            <li>
                <a href="User-Chat-Page.html">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    <span>客服中心</span>
                </a>
            </li>
            <li id="logout">
            	<a href="javascript:void(0)" onclick="Logout()">
                    <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                    <span>退出登录</span>
                </a>
                
            </li>
        </ul>


        <div id="bubbles" class="main container">
        	<!--<div class="container">-->
		        <div class="bubble" style="--i:1"></div>
		        <div class="bubble" style="--i:2"></div>
		        <div class="bubble" style="--i:3"></div>
		        <div class="bubble" style="--i:4"></div>
		        <div class="bubble" style="--i:5"></div>
		        <div class="bubble" style="--i:6"></div>
		        <div class="bubble" style="--i:7"></div>
		        <div class="bubble" style="--i:8"></div>
		        <div class="bubble" style="--i:9"></div>
		        <div class="bubble" style="--i:10"></div>
		        <div class="bubble" style="--i:11"></div>
		        <div class="bubble" style="--i:12"></div>
		        <div class="bubble" style="--i:13"></div>
		        <div class="bubble" style="--i:14"></div>
		        <div class="bubble" style="--i:15"></div>
		        <div class="bubble" style="--i:16"></div>
		        <div class="bubble" style="--i:17"></div>
		        <div class="bubble" style="--i:18"></div>
		    <!--</div>-->
        	Bubbles!!!!!!!!!!!!!
        </div>
        
    </div>
    
</body>

<script src="js/GetInfo.js"></script>

<script>
	function Logout() {
		var flag = window.confirm("确定退出登录吗？");
		if (flag) {
			window.location.href = "AdInfo?type=logout";
		}
	}
</script>



</html>